<template>
  <div class="page-container">
    <el-form :inline="true" :model="search" size="small" ref="searchForm">
      <el-form-item label="规格搜索:">
        <el-input placeholder="请输入规格名称" v-model="search.attrName" @change="filterSubmit"></el-input>
      </el-form-item>
      <el-form-item label="商品分类:" prop="classify">
        <el-cascader v-model="search.classify" :options="classifyList" @change="filterSubmit" clearable
          :props="{ value: 'id', label: 'name' }"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="filterSubmit">查询</el-button>
        <el-button @click="reset(searchForm)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button size="small" @click="addSpec" type="primary">添加商品规格</el-button>
    </el-row>
    <div class="table-list">
      <el-table :data="list" size="small" style="margin-top:10px;">
        <el-table-column prop="attrName" align='center' label="规格名称"></el-table-column>
        <el-table-column prop="className" align='center' label="分类名称"></el-table-column>
        <el-table-column prop="valueSelect" label="规格值">
          <template #default="scope">
            <el-tag v-for="item in scope.row.values" :key="item.id" effect="dark" style="margin-left: 5px;" size="small">
              {{ item }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120px">
          <template #default="scope">
            <el-button type="primary" link @click="editRow(scope.row)" size="small">编辑</el-button>
            <el-button type="primary" link @click="delRow(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-block">
      <el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]" :small="true"
        :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper" :total="total"
        :hide-on-single-page="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <spec-detail v-model:dialogDrawer="dialogFormVisible" :title="title" :default-form="form"
      @onDetailSubmit="detailSubmit" :classify-list="classifyList"></spec-detail>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { changeDetSelect } from '/@/utils/utils'
import SpecDetail from '../components/SpecDetail.vue'
import { pageList, remove, get } from '/@/api/pms/attr'
import { getCategoryTree } from '/@/api/pms/category'
export default {
  name: 'Spec',
  components: {
    SpecDetail
  },
  setup() {
    const searchForm = ref()
    const state = reactive({
      search: {
        attrName: '',
        catelogId: '',
        classify: [],
        current: 1,
        size: 10,
        isWork: "1",
      },
      classifyList: [],
      dialogFormVisible: false,
      form: {},
      title: '新增规格',
      list: [],
      total: 0,
      current: 1,
      page: 10,
    })
    const filterSubmit = () => {
      if (state.search.classify.length > 0) {
        state.search.catelogId = state.search.classify[state.search.classify.length - 1]
      }
      getList()
    }
    const addSpec = () => {
      inintForm()
      state.title = '新增规格'
      state.dialogFormVisible = true
    }
    const editRow = (row) => {
      inintForm()
      state.title = '编辑规格'
      state.dialogFormVisible = true
      get(row.id).then(res => {
        state.form = res.data
        if (state.form.values == null) {
          state.form.values = []
        }
      })
    }
    const inintForm = () => {
      state.form = {
        id: '',
        catelogId: '',
        attrName: '',
        values: []
      }
    }
    const delRow = (row) => {
      ElMessageBox.confirm(
        '是否确认删除名称为"' + row.attrName + '"的数据项？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        remove(row.id).then(res => {
          if (res.code == 0) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            getList()
          }
        })

      }).catch()
    }
    const getList = () => {
      pageList(state.search).then(res => {
        state.list = res.data.records
        state.total = res.data.total
      })
    }
    const reset = (formEl) => {
      state.search = {
        attrName: '',
        catelogId: '',
        classify: [],
        current: 1,
        size: 10,
        isWork: "1",
      },
        getList()
    }
    const handleSizeChange = () => {
      getList()
    }
    const handleCurrentChange = e => {
      state.current = e
      getList()
    }
    const getClassifyTree = () => {
      getCategoryTree({isWork: "1"}).then(res => {
        state.classifyList = res.data
      })
    }
    const detailSubmit = () => {
      getList()
      state.dialogFormVisible = false
    }
    onMounted(() => {
      getList()
      getClassifyTree()
    })
    return {
      ...toRefs(state),
      filterSubmit,
      addSpec,
      editRow,
      delRow,
      searchForm,
      reset,
      handleSizeChange,
      handleCurrentChange,
      getClassifyTree,
      detailSubmit
    }
  }
}
</script>

<style scoped lang="scss">
.table-list {
  background: var(--next-color-white);
  margin-top: 10px;

  :deep(.el-table__header-wrapper .el-table__cell) {
    background: var(--el-color-primary-light-9);
    color: var(--next-bg-menuBar-light-1);
  }
}
</style>